import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import request from "../../api/request";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { ActionBar } from "react-vant";
import { Image, Swiper } from "antd-mobile";
import Navbar from "../../compoents/Navbar";
import style from "./index.module.css";
import { Popup, Space, List, Button } from "antd-mobile";
function Index() {
  const { id } = useParams();
  const [socoorder, setSocoorder] = useState([]);
  const navigate = useNavigate();
  const [visible1, setVisible1] = useState(false);

  const getSocoorder = async () => {
    const res = await request.get("/api/restorative/detail", {
      params: {
        id,
      },
    });
    console.log("买药订单详情", res);
    if (res.code === 200) {
      setSocoorder(res.data);
    }
  };

  useEffect(() => {
    getSocoorder();
  }, []);

  const goPay = () => {
    setVisible1(true);
  };

  return (
    <div>
      <Navbar title="买药详情" showBack onBack={() => navigate(-1)} />
      <div>
        <Swiper>
          {socoorder.map((item, index) => (
            <Swiper.Item key={index}>
              <Image lazyload src={item.restorativesimage} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>


      {socoorder.length > 0 &&
        socoorder.map((item, index) => (
          <div key={index} className={style.socoBox}>
            <div className={style.priceBox}>
              <span className={style.price}>￥{item.restorativesprice}</span>
              <span className={style.siae}>2盒低至￥100起</span>
            </div>

            <h3>{item.restorativesname}</h3>

            <div className={style.spanHang}>
              <span>
                <p>正品保障</p>
              </span>
              <span>
                <p>隐私发货</p>
              </span>
              <span>
                <p>专业药师</p>
              </span>
              <span>
                <p>官网直供</p>
              </span>
            </div>
          </div>
        ))}



      <div>
    
      

      </div>
      


      <ActionBar>
        <ActionBar.Icon icon={<ChatO />} text="首页" />
        <ActionBar.Icon icon={<CartO />} text="客服" />
        <ActionBar.Icon icon={<ShopO />} text="商品清单" />

        <ActionBar.Button type="warning" text="加入清单" />
        <ActionBar.Button
          onClick={() => goPay()}
          type="danger"
          text="立即购买"
        />
      </ActionBar>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        {socoorder.map((item, index) => (
          <div key={index}>
            <div className={style.payImg}>
              <img src={item.restorativesimage} alt="" />
              <span>{item.restorativesprice}</span>
            </div>

            <h3>规格</h3>

            <span className={style.payText}>{item.restorativesname}</span>

            <h3>多盒装</h3>

            <div className={style.payTexts}>
              <span>
                {item.restorativestitle}盒￥{item.restorativesprice}/盒
              </span>
              <span>
                {item.restorativestitle}盒￥{item.restorativesprice}/盒
              </span>
              <span>
                {item.restorativestitle}盒￥{item.restorativesprice}/盒
              </span>
              <span>
                {item.restorativestitle}盒￥{item.restorativesprice}/盒
              </span>
            </div>

            <h3>数量</h3>
            <Button className={style.payBtn} block color="primary" size="large">
              确定
            </Button>
          </div>
        ))}
      </Popup>
    </div>
  );
}

export default Index;
